<template>
    <div class="thome">
        <div class="economic-info">
            <div class="item">
                <div class="item-title">
                    <img src="@/assets/images/link/left_icon1.png" alt="" />
                    <div class="title-text">
                        <div class="sub-title">
                            <div class="title-num">1983</div>
                            <div>次数</div>
                        </div>
                        成功总预警数
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="item-title">
                    <img src="@/assets/images/link/left_icon2.png" alt="" />
                    <div class="title-text">
                        <div class="sub-title">
                            <div class="title-num">2</div>
                            <div>分钟</div>
                        </div>
                        平均响应时间
                    </div>
                </div>
            </div>
        </div>
        <div class="economic-info economic-info-desc">
            <div class="item">
                <div class="item-title">
                    <div class="icon-box">
                        <img src="@/assets/images/link/left_icon3.png" alt="" />
                    </div>
                    <div class="title-text">
                        <div class="sub-title">
                            <div class="title-num">8.32</div>
                            <div>亿元</div>
                        </div>
                        减少损失
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="item-title">
                    <img src="@/assets/images/link/left_icon4.png" alt="" />
                    <div class="title-text">
                        <div class="sub-title">
                            <div class="title-num">99.9</div>
                            <div>%</div>
                        </div>
                        预警准确率
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup></script>
>

<style scoped lang="scss">
.thome {
    @include Padding(25, 0, 10, 0);
    @include hHeight(300);
    .economic-info {
        display: flex;
        @include MarginBottom(50);
        justify-content: space-around;

        &:first-child {
            @include MarginBottom(40);
        }
        .item {
            flex: 1;
            display: flex;
            //justify-content: center;
            .title-text {
                @include MarginLeft(10);
                color: #a2d5fe;
            }
            .item-title {
                @include FontSize(14);
                display: flex;
                align-items: center;
                @include LineHeight(22);
                img {
                    @include Width(78);
                    @include wHeight(58);
                    @include MarginRight(5);
                }

                .sub-title {
                    @include FontSize(15);
                    display: flex;
                    align-items: flex-end;
                    white-space: nowrap;
                    color: #a2d5fe;
                    > div {
                        display: flex;
                        align-items: flex-end;
                        @include wHeight(30);
                        @include LineHeight(25);
                    }
                    .title-num {
                        color: '#0ff';
                        font-weight: bold;
                        @include FontSize(24);
                        @include MarginRight(5);
                        @include LineHeight(30);
                    }
                }
            }
        }
        .right {
            @include MarginLeft(-30);
        }
    }
    .title-box {
        @include MarginTop(25);
    }
}

.economic-info-desc {
    @include MarginTop(30);
}
</style>
